<template>
	<view>
		<tt-bar leftIcon="icon-back" title="助力进度" titleAlign="left"></tt-bar>
		<!-- <view class="constant"> -->
			<!-- <view class="top">
				<view class="shangmianTop"><image src="../static/120.png" mode=""></image></view>
				<view class="xiamianBottom"><text>“我看中了这门课，请帮我助个力吧，万分感谢！”</text></view>
			</view> -->
			<!-- <view class="content"> -->
				<!-- <view class="courseInfo"> -->
					<!-- <view class="tupian"><image :src="datalist.courseImg"></image></view> -->
					<!-- <view class="shoppingName"> -->
						<!-- <view class="className"><text>{{ datalist.name }}</text></view> -->
						<!-- <view class="jigou"><text>{{ datalist.storeName }}</text></view> -->
						<!-- 助力中 -->
						<!-- <view class="timeBox">
							<view class="time"><text>{{_hour}}</text></view>
							<view class="maohao"><text>:</text></view>
							<view class="time"><text>{{_min}}</text></view>
							<view class="maohao"><text>:</text></view>
							<view class="time"><text>{{_sec}}</text></view>
							<view class="end"><text>后结束助力</text></view>
						</view> -->
					<!-- </view> -->
				<!-- </view> -->
				<!-- <view class="helpjindu"> -->
					<!-- 首次打开助力页面 -->
					<!-- <view class="helpPlease"> -->
						<!-- <view class="price">
							<text class="zc">助力</text>
							<text class="money">￥</text>
							<text class="num">{{powerSum}}</text>
							<text class="zc">,还差</text>
							<text class="money">￥</text>
							<text class="num">{{surplusAmount}}</text>
						</view> -->
						<!-- <view class="jindutiao">
							<view class="jindutiaoLeft">
								<view class="jindutiaoimg">
									<view class="topline" :style="{width:width + '%'}"></view>
								</view>
								<view class="jindutiaowenzi"> -->
									<!-- <text>{{width}}%</text> -->
									<!-- </view> -->
							<!-- </view>
							<view class="jindutiaoRight">
								<view class="topwenzi"><text>最低</text></view>
								<view class="bottomwenzi"><text>￥{{datalist.underPrice}}</text></view>
							</view> -->
						<!-- </view>
						<view class="pleaseBtn" @tap="helpjincheng"><image src="../static/helpbtnbig2.gif" mode=""></image></view> -->
					<!-- </view>
					<view class="helpRecord">
						<view class="Record">
							<view class="Recordleft"><text>助力记录</text></view>
							<view class="Recordright"><text>已助力{{powerTotalNum}}次</text></view>
						</view>
						<view class="friend" v-for="(item,index) in powerlist" :key="index">
							<view class="friendLeft">
								<view class="friendimg"><image :src="item.pic" mode=""></image></view>
								<view class="friendtext">
									<view class="toptext"><text>{{ item.nickname }}</text></view>
									<view class="bottomtext"><text>小刀一砍，惊喜满满！</text></view>
								</view>
							</view>
							<view class="friendRight"><text>￥{{ item.powerPrice }}</text></view>
						</view> -->
						<!-- <view class="friend">
							<view class="friendLeft">
								<view class="friendimg"><image :src="powerIn.pic" mode=""></image></view>
								<view class="friendtext">
									<view class="toptext">
										<text>{{ powerIn.nickName }}</text>
									</view>
									<view class="bottomtext"><text>小刀一砍，惊喜满满！</text></view>
								</view>
							</view>
							<view class="friendRight">
								<text>￥{{ powerIn.hisPowerPrice }}</text>
							</view>
						</view>
				 -->
	<!-- 				</view>
				</view>
			</view>
		</view> -->
		
	</view>
</template>

<script>
import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
export default {
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			parentId: state => state.user.parentId,
			isLogin: state => state.user.isLogin,
		})
	},
	data() {
		return {
			powerInId:0,
			actPowerId:0,
			powerlist:[],
			powerSum:0,
			powerTotalNum:0,
			surplusAmount:0,
			width:0,
			datalist:{},
			powerIn:{},
			_hour:'',
			_min:'',
			_sec:'',
			djsText:'',
			createTime:'',
			actEndTime:''
			
		};
	},
	methods: {
		
		
		
		getjilu() {
			// 获取好友助力的列表
			this.$store
				.dispatch('apiOpenApowerlist', {
					powerInId: this.powerInId
				})
				.then(res => {
					console.log(res);
					this.powerlist = res.data.powerBuddies;
					this.powerSum = res.data.powerSum;
					this.powerIn = res.data.powerIn;
					this.createTime = res.data.powerIn.createTime;
					this.powerTotalNum = res.data.powerTotalNum;
					this.surplusAmount = res.data.surplusAmount;
					this.width = res.data.percent;
					this.actEndTime = res.data.powerIn.actEndTime;
					console.log(this.powerIn);
					this.daojishi();
				});
		},
		daojishi() {
			setInterval(()=>{
			//倒计时
			let _end = new Date(Date.parse(this.powerIn.createTime.replace(/-/g, '/')));//发起助力的时间
			let _endact = new Date(Date.parse(this.powerIn.actEndTime.replace(/-/g, '/'))); //活动结束时间
			var oldtime = new Date(_end);	
			var _now = new Date();//当前时间
			var _rightTime = _endact.getTime() - _now.getTime(); 
			var _leftTime = ''
			if(_rightTime > 24*60*60*1000){
				
				 _leftTime = oldtime.getTime() + 24*60*60*1000 - _now.getTime();
			}else{
				
				_leftTime = _rightTime
			}
			let _hour = Math.floor(_leftTime / (1000 * 60 * 60));
			let _min = Math.floor((_leftTime / (1000 * 60)) % 60);
			let _sec = Math.floor((_leftTime / 1000) % 60);
			this._hour = _hour > 9 ? _hour : '0' + _hour;
			this._min = _min > 9 ? _min : '0' + _min;
			this._sec = _sec > 9 ? _sec : '0' + _sec;
			this.djsText = _hour + ':' + _min + ':' + _sec;
			if(_leftTime < 0 ) {
				this._hour = "00";
				this._min = "00";
				this._sec = "00";
					
			}
			},1000)
		},
		helpjincheng() {
			if(this.isLogin){
				uni.showLoading({
				    title: '加载中'
				});
				this.$store
					.dispatch('apiOpenApowerFriend', {
						powerInId: this.powerInId,
						powerUserId: this.userInfo.userId,
						powerName: this.userInfo.nickname,
						actPowerId: this.datalist.id
					})
					.then(res => {
						console.log(res);
						this.datalist.powerInId = this.powerInId;
						console.log(this.datalist);
						let _now = new Date();						
						let _end = new Date(Date.parse(this.actEndTime.replace(/-/g, '/')));
						var _rightTime = _end.getTime() - _now.getTime(); 
						var helpList = JSON.stringify(this.datalist);
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							success: function() {
								
								
									if (res.data.result == 4 && _rightTime<0) {
										uni.hideLoading();
										uni.navigateTo({
											url: '../ffhelpPlan/ffhelpPlan?index=' + helpList
										});
										
									}else if (res.data.result == 4 && _rightTime>0){
										uni.hideLoading();
										uni.navigateTo({
											url: '../chelpPlan/chelpPlan?index=' + helpList 
										});
										
									}else if (res.data.result == 1){
										uni.hideLoading();
										uni.navigateTo({
											url: '../zhelpPlan/zhelpPlan?index=' + helpList 
										});
										
									}else if (res.data.result == 2){
										uni.hideLoading();
										
										uni.navigateTo({
											url: '../chelpPlan/chelpPlan?index=' + helpList 
										});
										
									}else if (res.data.result == 5){
										uni.hideLoading();
										
										uni.navigateTo({
											url: '../helpjincheng/helpjincheng?index=' + helpList 
										});
										
									}
								
							}
						});
					});
			} else {
				this.toPage('login');
			}
			
		}
	},
	created() {
		setTimeout(()=>{
			this.getjilu();
			this.helpjincheng()
		},500)
	},
	onLoad(data) {

		this.datalist = JSON.parse(data.index);
		console.log(this.datalist);
		this.powerInId = data.powerInId;
		console.log(this.powerInId)
				
	}
};
</script>

<style lang="less">
/* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body {
	background-color: #fed407;
}
.top {
	// background-color: green;
	width: 100%;
	height: 150rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 20rpx;
	.shangmianTop {
		width: 75rpx;
		height: 75rpx;
		// background-color: blue;
		margin-bottom: 25rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	.xiamianBottom {
		text-align: center;
		width: 100%;
		text {
			color: #000;
			font-size: 26rpx;
		}
	}
}
.content {
	width: 100%;
	padding: 40rpx 40rpx 0 40rpx;
	.courseInfo {
		width: 100%;
		height: 300rpx;
		background-color: #fff;
		margin-bottom: 40rpx;
		border-radius: 20rpx;
		display: flex;
		padding: 25rpx;
		.tupian {
			width: 250rpx;
			height: 250rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
		.shoppingName {
			padding-left: 20rpx;
			width: 354rpx;
			position: relative;
			.className {
				font-weight: 700;
				font-size: 30rpx;
				margin-bottom: 10rpx;
				height: 39rpx;
				overflow: hidden;
			}
			.jigou {
				color: #a6a6a6;
				font-size: 24rpx;
				margin-bottom: 85rpx;
			}
			.timeBox {
				margin-left: 10rpx;
				display: flex;
				.time {
					width: 50rpx;
					height: 50rpx;
					background-color: red;
					text-align: center;
					border-radius: 5rpx;
					text {
						line-height: 50rpx;
						color: #fff;
					}
				}
				.maohao {
					width: 25rpx;
					height: 50rpx;
					text-align: center;
					text {
						color: red;
						line-height: 50rpx;
					}
				}
				.end {
					margin-left: 15rpx;
					height: 50rpx;
					text-align: center;
					text {
						color: #bebebe;
						line-height: 50rpx;
						font-size: 22rpx;
					}
				}
			}
		}
	}
	.helpjindu {
		width: 100%;
		// height: 750rpx;
		background-color: #fff;
		margin-bottom: 40rpx;
		border-radius: 20rpx;
		padding: 40rpx;
		.helpPlease {
			.price {
				.zc {
					font-size: 26rpx;
					color: #4e4e4e;
				}
				.num {
					color: red;
					font-size: 40rpx;
				}
				.money {
					color: red;
					font-size: 22rpx;
				}
			}
		}

		.jindutiao {
			display: flex;
			align-items: flex-end;
			height: 70rpx;
			// background-color: green;

			.jindutiaoLeft {
				height: 15rpx;
				flex: 85;
				display: flex;
				align-items: center;

				.jindutiaoimg {
					width: 100%;
					// margin-left: 50rpx;
					height: 100%;
					background-image: url(../static/jindutiao.png);
					background-size: 100% 100%;
					.topline{
						height: 100%;
						background-color:#fcd100;
						border-radius: 30rpx;
					}
				}
				.jindutiaowenzi {
					text-align: center;
					text {
						line-height: 45rpx;
						color: #ccc;
						font-size: 18rpx;
					}
				}
			}
			.jindutiaoRight {
				height: 100%;
				flex: 15;
				color: red;
				font-size: 28rpx;
				text-align: center;
			}
		}
		.pleaseBtn {
			// width: 100%;
			margin: 50rpx 0;
			height: 100rpx;
			width: 100%;
			// background-image: url(../static/helpbtnbig.png);
			background-size: 100% 100%;
			text-align: center;
			background-color: transparent;
			image{
				width: 100%;
				height: 100%;
			}
			text {
				color: red;
				font-size: 40rpx;
				font-weight: 900;
				line-height: 85rpx;
				text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
			}
		}
		.helpRecord {
			.Record {
				display: flex;
				justify-content: space-between;
				text {
					font-size: 26rpx;
					color: #4e4e4e;
				}
			}

			.friend {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;

				.friendLeft {
					display: flex;
					.friendimg {
						width: 80rpx;
						height: 80rpx;
						margin-right: 5rpx;
						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
					.friendtext {
						.toptext {
							text {
								color: #4e4e4e;
								font-size: 22rpx;
							}
						}
						.bottomtext {
							text {
								color: #4e4e4e;
								font-size: 22rpx;
							}
						}
					}
				}
				.friendRight {
					color: red;
					font-size: 26rpx;
				}
			}
		}
	}
}*/
</style>
